<template>
      <!-- 页面内容 -->
      <div class="page-content">
      <!-- 轮播图 -->
      <el-carousel height="500px" class="banner">
        <el-carousel-item v-for="item in banners" :key="item.id">
          <img
              @click="swiperJump(item)"
              :src="proxy.globalInfo.imageUrl + item.imgPath"
              mode="aspectFill"
              class="banner-image"
              :style="{ width: '100%' }"
            />
          <div class="banner-text">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>

     <div class="content">
      <div class="article-recommendation">
        <div class="section-header">
          <h2>最新热文</h2>
          <el-button type="text" @click="goToRead">查看更多 ></el-button>
        </div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="article in articles" :key="article.postId">
            <el-card class="article-card" @click="goToRead(article.postId)">
              <!-- 图片区域 -->
              <div class="card-image-container" :style="{ backgroundImage: article.coverPath ? `url(${proxy.globalInfo.imageUrl+article.coverPath})` : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }">
                <!-- 如果没有图片，显示默认背景 coverPath: "202503/pR92tGtv4Q2d2FBXvxbZIQwmljgT5K.png" -->
                <div v-if="!article.coverPath" class="default-background">
                  <span class="default-text">无图片</span>
                </div>
              </div>
              <!-- 文章信息 -->
              <div class="card-content">
                <h3>{{ article.title }}</h3>
                <p>{{ article.description }}</p>
              </div>
              <!-- 个人信息 -->
              <div class="article-meta">
                <span>{{ article.username }}</span>
                <span>{{ article.createTime }}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

     <!-- 分类推荐 -->
      <div class="category-recommendation grid-layout">
        <div class="section-header">
          <h2>分类推荐</h2>
          <el-button type="text" @click="goToRead">查看更多 ></el-button>
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="category in categories" :key="category.id" class="grid-item">
            <el-card :class="['category-card', 'image-card']" :style="{ backgroundColor:  category.bgColor }" @click="goToCategory(category.categoryId)">
              <div class="overlay">
                <h3>{{ category.categoryName }}</h3>

              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
     </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();
import { useRouter } from 'vue-router';

const api = {
    loadCarousel: "/appCarousel/loadCarousel",
    saveCarousel: "/appCarousel/saveCarousel",
    loadDataList: "/post/loadAllPost",
    loadCategory: "/category/loadAllCategory4Select",
  };

// 路由跳转
const router = useRouter();
const goToRead = (postId) => router.push(  {
    name:"PostDetail",
    params:{
      id:postId,
    }
  });
const goToCategory = (categoryId) => router.push(
  {
    name:"ReadIndex",
    params:{
      categoryId:categoryId
    }
  }
);

// 轮播图数据
const banners = ref([
]);
const loadCarouselData = async () => {
  let result = await proxy.Request({
    url: api.loadCarousel,
    showLoading: false,
  });
  if (!result) {
    return;
  }
  banners.value = result.data;
  banners.value.forEach((item)=>{
    console.log(proxy.globalInfo.imageUrl+item.imgPath)
  })

};
loadCarouselData();


// 文章推荐数据
const articles = ref([
  {
    id: 1,
    image: 'https://via.placeholder.com/300x200',
    title: '如何应对焦虑',
    description: '学习应对焦虑的技巧',
    author: '张三',
    date: '2025-10-01',
  },
  {
    id: 2,
    image: 'https://via.placeholder.com/300x200',
    title: '心理咨询师推荐',
    description: '找到适合你的心理咨询师',
    author: '李四',
    date: '2025-10-02',
  },
  {
    id: 3,
    image: 'https://via.placeholder.com/300x200',
    title: '心理健康小知识',
    description: '了解心理健康的基础知识',
    author: '王五',
    date: '2025-10-03',
  },
]);

const loadDataList = async () => {
  let params = {
    pageNo: 1,
    pageSize: 8,
  };
  let result = await proxy.Request({
    url: api.loadDataList,
    params: params,
  });
  if (!result) {
    return;
  }
  articles.value=result.data.list;
};
loadDataList();


// 分类推荐数据
const categories = ref([
  {
    id: 1,
    name: '情绪管理',
    description: '学会管理自己的情绪',
  },
  {
    id: 2,
    name: '人际关系',
    description: '改善你的人际关系',
  },
  {
    id: 3,
    name: '压力应对',
    description: '有效应对生活中的压力',
  },
]);
const loadCategoryList = async () => {
  let params={
    pageNo:1,
    pageSize:4,
  }
  let result = await proxy.Request({
    url: api.loadCategory,
    params,
  });
  if (!result) {
    return;
  }
  categories.value = result.data;
};
loadCategoryList();

</script>

<style lang="scss" scoped>
.page-content {

}

.banner {
  margin-top: 20px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 10% 20px;
}

.article-recommendation {
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      font-size: 24px;
      color: #303133;
      margin: 0;
    }

    .el-button {
      font-size: 14px;
      color: #409eff;
    }
  }

  .article-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .card-image-container {
      width: 100%;
      height: 180px;
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      .default-background {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .default-text {
          color: #fff;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }

    .card-content {
      padding: 16px;
      flex: 1; /* 让内容区域填充剩余空间 */

      h3 {
        font-size: 18px;
        color: #303133;
        margin: 0 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      p {
        font-size: 14px;
        color: #606266;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .article-meta {
      padding: 12px 16px;
      background-color: #f5f7fa;
      border-top: 1px solid #ebeef5;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}

.category-recommendation {
  margin-top: 40px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      font-size: 24px;
      color: #303133;
      margin: 0;
    }

    .el-button {
      font-size: 14px;
      color: #409eff;
    }
  }

  .grid-item {
    margin-bottom: 20px;
  }

  .category-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 200px;
    position: relative;
    background-size: cover;
    background-position: center;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      text-align: center;
      padding: 20px;

      h3 {
        font-size: 24px;
        margin: 0 0 10px;
        color: #fff;
      }

      p {
        font-size: 14px;
        margin: 0;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}



// .card-image {
//   width: 100%;
//   height: 150px;
//   object-fit: cover;
// }

// .article-meta {
//   display: flex;
//   justify-content: space-between;
//   margin-top: 10px;
//   font-size: 12px;
//   color: #666;
// }

.footer {
  margin-top: auto;
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
}
.content{
  width: 80%;
  margin-left: 10%;
}
</style>
